<template>
  <div class="ten_box">
    <m-header modile-title="简单的图灵" go-back="true"></m-header>
    <div class="tu-ling">
      <div id="container">
        <ul class="content">
          <li v-for="(item, index) in messageList">
            <img v-if="item.myself===true" class="imgright" src="../image/k.jpg" alt="">
            <img v-if="item.myself===false" class="imgleft" src="../image/l.jpg" alt="">
            <!--<img :src="'../image/'+(item.myself?'k.png':'l.png')" :class="'img'+(item.myself?'right':'left')" alt="">-->
            <span :class="'span'+(item.myself?'right':'left')">{{item.message}}</span>
          </li>
        </ul>
        <div class="footer">
          <div id="user_face_icon">
            <img src="../image/k.jpg" alt="">
          </div>
          <input type="text" v-model.trim="inputValue" @keyup.enter='chat' id="text" placeholder="说点什么吧...">
          <span id="btn">发送</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    .tu-ling {
      #container {
        width: 100%;
        height: 12.5rem;
        background: #eee;
        position: relative;
        box-shadow: 20px 20px 55px #777;
        .content {
          font-size: 20px;
          width: 100%;
          height: 90%;
          overflow: auto;
          padding: 5px;
          li {
            margin-top: 10px;
            /*padding-left: 10px;*/
            width: 100%;
            display: block;
            clear: both;
            overflow: hidden;
            img {
              float: left;
              width: 60px;
              height: 60px;
              border-radius: 50%;
            }
            span {
              background: #7cfc00;
              padding: 10px;
              border-radius: 10px;
              float: left;
              margin: 6px 10px 0 10px;
              max-width: 310px;
              border: 1px solid #ccc;
              box-shadow: 0 0 3px #ccc;
            }
            img.imgleft {
              float: left;
            }
            img.imgright {
              float: right;
            }
            span.spanleft {
              float: left;
              background: #fff;
            }
            span.spanright {
              float: right;
              background: #7cfc00;
            }
          }
        }
        .footer {
          width: 100%;
          height: 70px;
          background: #666;
          position: absolute;
          bottom: 0;
          padding: 10px;
          display: flex;
          align-items: center;
          #user_face_icon {
            display: inline-block;
            background: red;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            position: absolute;
            bottom: 6px;
            left: 14px;
            cursor: pointer;
            overflow: hidden;
            img {
              width: 60px;
              height: 60px;
            }
          }
          input {
            width: 70%;
            height: 45px;
            outline: none;
            font-size: 20px;
            text-indent: 10px;
            position: absolute;
            border-radius: 6px;
            right: 80px;
          }
          span {
            display: inline-block;
            width: 20%;
            height: 48px;
            background: #ccc;
            font-weight: 900;
            line-height: 45px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            border-radius: 6px;
          }
          span:hover {
            color: #fff;
            background: #999;
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import qs from 'qs'

  export default {
    data() {
      return {
        inputValue: '', // 输入的内容
        messageList: [] // 聊天数组的内容
      }
    },
    methods: {
      // 点击回车发送消息
      chat() {
        this.messageList.push({
          message: this.inputValue,
          myself: true // 用来判断当前是否是自己输入,自己输入为true，机器人为false
        })
        // 每次发送消息之后机器人就要回复，所以添加完后直接调入机器人接口
        const url = 'http://www.tuling123.com/openapi/api'
        const data = {
          key: 'e5e78db64c3744fda06533e6729737da', // 别人的key  我自己的key：45fcaffbdb1243319721eb3038b7a7ae
          info: this.inputValue
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          console.log(res)
          if (res.status === 200) {
            this.messageList.push({
              message: res.data.text,
              myself: false
            })
            this.inputValue = ''
          }
        })
      }
    },
    components: {
      mHeader
    }
  }
</script>
